<script setup>
    import { onMounted } from 'vue'
    import { useStore } from 'vuex'
    import { getProjectDetail } from '@/api/project'
    import ContentCard from '../../../components/ContentCard.vue'

    const store = useStore()
    
    // 项目详情
    let resData = $ref({})

    let dataLoading = $ref(true)

    onMounted(() => {
        getProjectDetail({ id: store.state.project.projectArea.id }).then(res => {
            dataLoading = false
            if(res.success){
                resData = res.result
            }
        })
    })


</script>

<template>
    <content-card back="list">
        <template #backText>
            <div class="text">项目列表</div>
        </template>
        <template #currentTitle>
            &nbsp;&gt;&nbsp;<div class="text active">基本情况</div>
        </template>

        <ul class="info-warp" v-loading="dataLoading">
            <li class="col-2 flex-between">
                <div class="item">
                    <div class="name">项目名称</div>
                    <div class="value-box">{{ resData.projectName }}</div>
                </div>
                <div class="item">
                    <div class="name">项目编号</div>
                    <div class="value-box">{{ resData.projectNumb }}</div>
                </div>
            </li>
            <li class="col-2 flex-between">
                <div class="item">
                    <div class="name">乡镇</div>
                    <div class="value-box text_overflow" :title="resData.towns_dictText">{{ resData.towns_dictText }}</div>
                </div>
                <div class="item">
                    <div class="name">年份</div>
                    <div class="value-box">{{ resData.year_dictText }}</div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="name">说明</div>
                    <el-input 
                        type="textarea" 
                        resize="none"
                        :rows="4" 
                        readonly 
                        class="value-box textarea"
                        :value="resData.projectSituation"
                    ></el-input>
                </div>
            </li>
            <li class="col-2 flex-between">
                <div class="item">
                    <div class="name">建筑面积</div>
                    <div class="value-box">{{ resData.constructionArea }}</div>
                </div>
                <div class="item">
                    <div class="name">其中新增高效节水灌溉面积</div>
                    <div class="value-box">{{ resData.irrigationArea }}</div>
                </div>
            </li>
            <li class="col-2 flex-between">
                <div class="item">
                    <div class="name">投资估算</div>
                    <div class="value-box">{{ resData.investmentBudget }}</div>
                </div>
                <div class="item">
                    <div class="name">建设地址</div>
                    <div class="value-box text_overflow" :title="resData.constructionAddress">{{ resData.constructionAddress }}</div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="name">主要建设内容</div>
                    <el-input 
                        type="textarea" 
                        resize="none"
                        :rows="4" 
                        readonly 
                        class="value-box textarea"
                        :value="resData.constructionContent"
                    ></el-input>
                </div>
            </li>
        </ul>

    </content-card>
</template>

<style lang="less" scoped>
    .info-warp{
        padding: 0 52px;

        li{
            padding-bottom: 24px;

            &.col-2{
                .item{
                    width:  677px;
                }
            }

            .item{
                width: 100%;
                color: #fff;

                .name{
                    padding-bottom: 15px;
                }

                .value-box{
                    width: 100%;
                    height: 48px;
                    line-height: 30px;
                    padding: 9px 15px;
                    box-shadow: inset 0px 0px 10px 0px #3271E6;
                    border-radius: 4px;

                    &.textarea{
                        height: 118px;

                        ::v-deep(.el-textarea__inner){
                            font-size: 16px;
                            box-shadow: none;
                            background: transparent;
                            padding: 0;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
</style>